<template>
    <view>
        <custom :is_back="false">
            <template #backText>
                <view @tap="gotoUserAddressListPage" class="flex align-center">
                    <view class="margin-right-10 text-xl">
                        <text class="cuIcon-locationfill"></text>
                    </view>
                    <view v-if="address_info" class="flex align-center">
                        <view class="text-cut-1">{{address_info.address_name}}</view>
                        <view class="margin-left-4 text-xl margin-right-20">
                            <text class="cuIcon-triangledownfill"></text>
                        </view>
                    </view>
                    <view v-else-if="is_open_location">
                        获取定位中
                    </view>
                    <view v-else>
                        定位失败，请开启定位后重试
                    </view>
                </view>
            </template>
            <template #right v-if="tap_search && address_info">
                <view class="padding-lr-20 text-bold text-xl" @tap="tap_search">
                    <text class="cuIcon-search"></text>
                </view>
            </template>
        </custom>
        <emptyList v-if="!is_open_location">
            <template #content>
                <nFormButton :tap="getSetLocationInfo" class_bg="bg-deep-nddyny" title="重新定位" style="width: 700rpx;"></nFormButton>
                <nFormButton :tap="gotoUserAddressListPage" title="手动定位"></nFormButton>
            </template>
        </emptyList>
        <view v-else-if="!address_info">
            <emptyList empty_list_title="获取定位中"></emptyList>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['address_info', 'tap_search'],
        data() {
            return {
                is_open_location: true,
            };
        },
        methods: {
            setAddressInfo(info) {
                this.$emit('update:address_info', info);
            },
            backData(data) {
                if (data.re_location == true) {
                    this.getSetLocationInfo();
                    return;
                }
                if (data.area_lat && data.area_lng && data.area_code) {
                    this.setLocationInfo(data);
                } else {
                    this.$map.addressName2latlngInfo(this, data.province_city_area_name, data.address_remark, (data) => {
                        this.setLocationInfo(data);
                    });
                }
            },
            gotoUserAddressListPage() {
                if (!this.address_info && this.is_open_location) {
                    // 获取定位中，不可以操作
                    return;
                }
                this.$store.commit('userNavTo',
                    '/user/address/list?is_select=1&is_location=1&address_name=' +
                    (this.address_info ? this.address_info.address_name : '') +
                    '&location=' + (
                        this.address_info ?
                        this.address_info.area_lat + ',' + this.address_info.area_lng : ''
                    )
                )
            },
            getSetLocationInfo() {
                this.is_open_location = true;
                this.setAddressInfo(null);
                this.$map.latlng2AddressInfo(this, (data) => {
                    this.setLocationInfo(data);
                })
            },
            setLocationInfo(data) {
                if (!data || !data.area_lng || !data.area_lat || !data.area_code) {
                    this.setAddressInfo(null);
                    this.is_open_location = false;
                    this.gotoUserAddressListPage();
                    return;
                } else {
                    this.is_open_location = true;
                }
                this.setAddressInfo(data);
            },
        }
    }
</script>
